import React, { useState } from "react";
import { AudioOutlined } from "@ant-design/icons";
import CustomerStyle from "./customer.module.css";
import { Table, Input, Button ,Modal, } from "antd";
import { ReactComponent as ResIcon } from "../../assets/icon/刷新.svg";
const { Search } = Input;
function CustomerPages() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const onSearch = (value, _e, info) => console.log(info?.source, value);
  const colums=[
    {
      key:"1",
      title:"客户单位",
      dataIndex:"Client_unit",
      align:"center"
    },
    {
      key:"2",
      title:"客户单位编号",
      dataIndex:"Customer_unit_number",
      align:"center"
    },
    {
      key:"3",
      title:"客户姓名",
      dataIndex:"Customer_name",
      align:"center"
    },{
      key:"4",
      title:"客户姓名编号",
      dataIndex:"Customer_name_number",
      align:"center"
    },
    {
      key:"5",
      title:"客户电话",
      dataIndex:"Customer_phone",
      align:"center"
    },
    {
      key:"6",
      title:"客户邮箱",
      dataIndex:"Customer_Email",
      align:"center"
    },
    {
      key:"7",
      title:"单位税号",
      dataIndex:"Unit_tax_number",
      align:"center"
    },
    {
      key:"8",
      title:"客户合同金额",
      dataIndex:"Unit_tax_number",
      align:"center"
    },
    {
      key:"9",
      title:"客户结算金额",
      dataIndex:"customer_contract",
      align:"center"
    }
    ,
    {
      key:"10",
      title:"客户回款金额",
      dataIndex:"received",
      align:"center"
    }
    ,
    {
      key:"11",
      title:"客户应收金额",
      dataIndex:"receivable",
      align:"center"
    }
  ]
  return (
    <div className={CustomerStyle.Customer_app}>
      <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
      <div className={CustomerStyle.Customer_Table_form}>
        <Search
          placeholder="input search text"
          onSearch={onSearch}
          style={{
            width: 200,
            marginRight: "10px",
          }}
        />
        <Button style={{ marginRight: "10px" }}
        onClick={showModal}
        >新增</Button>
        <Button style={{ display: "flex", alignItems: "center" }}>
          <ResIcon width={15} />
          <span style={{ margin: "0 5px" }}>重置</span>
        </Button>
      </div>
      <Table  columns={colums} bordered='true'/>
    </div>
  );
}

export default CustomerPages;
